<template>
  <div id="websiteSetting" class="container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick" class="tab-card tabs-white">
      <el-tab-pane :label="$t('基本设置')" name="basic">
        <el-form ref="basicForm" :model="basicForm" class="flexForm" label-position="top">
          <el-form-item :label="`${$t('选择语言')}:`">
            <el-select v-model="lang" :placeholder="$t('请选择语言')" @change="changLang">
              <el-option v-for="item in langList" :key="item.id" :label="item.lang" :value="item.lang" />
            </el-select>
          </el-form-item>
          <el-form-item prop="site_name" :label="`${$t('网站名称')}:`">
            <el-input v-model="basicForm.site_name" />
          </el-form-item>
          <el-form-item size="small" :label="`${$t('网站logo')}:`">
            <div class="attachment_imgBox" @click="openList('logo')">
              <img v-if="basicForm.logo" :src="logoUrl" class="attachmentImg" />
              <i v-else class="el-icon-camera" />
            </div>
            <Attachment ref="attachment" :dialog-show.sync="dialogShow" :attachment-type="attachmentType"
              @func="getData" />
          </el-form-item>
          <el-form-item size="small" :label="`${$t('网站dark_logo')}:`">
            <div class="attachment_imgBox" @click="openList('dark_logo')">
              <img v-if="basicForm.dark_logo" :src="dark_logo_url" class="attachmentImg" />
              <i v-else class="el-icon-camera" />
            </div>
          </el-form-item>

          <el-form-item prop="icp" :label="`${$t('ICP备案号')}:`">
            <el-input v-model="basicForm.icp" />
          </el-form-item>
          <el-form-item prop="icp_link" :label="`${$t('ICP备案号链接')}:`">
            <el-input v-model="basicForm.icp_link" />
          </el-form-item>
          <el-form-item prop="gwa" :label="`${$t('公安备案号')}:`">
            <el-input v-model="basicForm.gwa" />
          </el-form-item>
          <el-form-item prop="gwa_link" :label="`${$t('公安备案号链接')}:`">
            <el-input v-model="basicForm.gwa_link" />
          </el-form-item>
          <el-form-item :label="`${$t('客户a链接')}:`">
            <el-input v-model="basicForm.customer_link" />
          </el-form-item>
          <el-form-item label="QQ:">
            <el-input v-model="basicForm.qq_code" />
          </el-form-item>
          <el-form-item :label="`${$t('模板共用')}:`">
            <el-radio-group v-model="basicForm.common_template">
              <el-radio :label="1">{{ $t('PC端移动端共用') }}</el-radio>
              <el-radio :label="2">{{ $t('PC端移动端不共用') }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="`${$t('静态文件路径')}:`">
            <el-input v-model="basicForm.static_file" />
          </el-form-item>
          <el-form-item :label="`${$t('别名规则')}:`">
            <el-select v-model="basicForm.alias_rule">
              <el-option :label="$t('首字母')" :value="1" />
              <el-option :label="$t('全拼')" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item prop="author" :label="`${$t('作者')}:`">
            <el-input v-model="basicForm.author" />
          </el-form-item>
          <el-form-item prop="wechat_code" :label="`${$t('微信客服')}:`">
            <div class="attachment_imgBox" @click="openList('wechat')">
              <img v-if="basicForm.wechat_code" :src="wechatUrl" class="attachmentImg" />
              <i v-else class="el-icon-camera" />
            </div>
          </el-form-item>
          <el-form-item prop="analytics_code" :label="`${$t('统计代码')}:`">
            <el-input v-model="basicForm.analytics_code" type="textarea" :autosize="{ minRows: 3, maxRows: 5 }" />
          </el-form-item>

          <el-form-item prop="customer_code" :label="`${$t('客服JS代码')}:`">
            <el-input v-model="basicForm.customer_code" type="textarea" :autosize="{ minRows: 3, maxRows: 5 }" />
          </el-form-item>
          <el-form-item prop="customer_a_link" :label="`${$t('客服a链接')}:`">
            <el-input v-model="basicForm.customer_a_link" />
          </el-form-item>
          <el-form-item prop="meta_link" :label="`${$t('搜索引擎授权代码')}:`">
            <el-input v-model="basicForm.meta_link" type="textarea" :autosize="{ minRows: 3, maxRows: 3 }" />
          </el-form-item>
          <el-form-item prop="site_email" :label="`${$t('站长邮箱')}:`">
            <el-input v-model="basicForm.admin_email" />
          </el-form-item>

          <el-form-item prop="favicon_link" :label="`${$t('网站favicon')}:`">
            <el-input v-model="basicForm.favicon_link" />
          </el-form-item>

          <el-form-item class="switch-website" prop="isGrey" :label="`${$t('一键置灰')}:`">
            <el-switch v-model="basicForm.isGrey" active-color="var(--huocms-com-color-primary)" inactive-color="#999"
              active-value="1" inactive-value="0" :active-text="$t('开')" :inactive-text="$t('关')"></el-switch>
          </el-form-item>
          <el-form-item>
            <el-button v-loading.fullscreen.lock="loading" type="primary" @click="save">
              {{ $t('保存') }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane :label="$t('语言设置')" name="lang">
        <Lang v-if="activeName == 'lang'" :website-id="websiteId" />
      </el-tab-pane>
      <!-- <el-tab-pane :label="$t('服务器设置')" name="server">
        <Server v-if="activeName == 'server'" :website-id="websiteId" />
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script>
import websettingApi from '@/api/websetting'
import Lang from './components/lang.vue'
import Server from './components/server.vue'

export default {
  components: { Lang },
  data() {
    return {
      loading: false,
      attachmentLimit: 10,
      dialogShow: false,
      attachmentData: [],
      imagelist: [],
      myHeaders: { Authorization: `Bearer ${this.$store.getters.token}` },
      headers: {},
      logoUrl: '',
      wechatUrl: '',
      imgUrl: this.$store.getters.updateURL,
      options: [], // 站点
      activeName: 'basic',
      websiteId: '',
      searchForm: {
        website_id: ''
      },
      basicForm: {
        icp: '',
        icp_link: '',
        gwa: '',
        gwa_link: '',
        author: '',
        site_email: '',
        analytics_code: '',
        cutomer_code: '',
        common_template: 1,
        static_file: '',
        alias_rule: '2',
        favicon_link: '',
        meta_link: ''
      },
      langList: [],
      lang: '',
      siteId: '',
      uploadType: '',
      attachmentType: '',
      dark_logo_url: ''
    }
  },
  computed: {
    siteId1() {
      return this.$store.getters.siteId
    }
  },
  watch: {
    siteId1(val, value) {
      console.log(val, value)
      this.siteId = val
      this.getLang()
    }
  },
  created() {
    // this.getWeblist()
    this.siteId = this.$store.getters.siteId
    if (this.siteId) {
      this.getLang()
    }
  },
  methods: {
    getData(data) {
      if (data.length > 1) {
        this.$message.error(this.$t(this.$t('最多只能选择一张图片')))
      } else {
        if (this.uploadType == 'logo') {
          this.basicForm.logo = data[0].id
          this.logoUrl = data[0].url
          console.log(this.basicForm.logo, this.logoUrl)
        } else if (this.uploadType == 'wechat') {
          this.basicForm.wechat_code = data[0].id
          this.wechatUrl = data[0].url
          console.log(this.basicForm.wechat_code, this.wechatUrl)
        } else if (this.uploadType == 'dark_logo') {
          this.basicForm.dark_logo = data[0].id
          this.dark_logo_url = data[0].url
          console.log(this.basicForm.dark_logo, this.dark_logo_url)
        }
        this.dialogShow = false
      }
    },
    // 打开附件弹窗
    openList(val) {
      this.dialogShow = true
      this.attachmentType = 2
      this.$nextTick(() => {
        this.$refs.attachment.getAttachmentList()
        this.$refs.attachment.$refs.AttachmentCate.getCateList(0)
      })
      this.uploadType = val
      console.log(val)
    },

    // 切换语言
    changLang(val) {
      this.lang = val
      this.getBasciInfo()
    },
    // 获取语言
    getLang() {
      websettingApi.langInfo({ site_id: this.siteId }).then(res => {
        this.langList = res.data
        if (res.data.length > 0) {
          this.lang = res.data[0].lang
        }
        this.getBasciInfo()
      })
    },
    // 切换tab
    handleClick(val) {
      this.activeName = val.name
      this.getLang()
    },

    // 获取基本信息
    getBasciInfo() {
      const val = {
        website_id: this.siteId,
        lang: this.lang
      }
      websettingApi.basicInfo(val).then(res => {
        console.log(res.data)
        if (res.code == 0) {
          this.basicForm = res.data.setting
          if (
            !this.basicForm.common_template ||
            this.basicForm.common_template == 'NaN'
          ) {
            this.basicForm.common_template = 1
          } else {
            this.basicForm.common_template = parseInt(
              res.data.setting.common_template
            )
          }
          this.basicForm.alias_rule = res.data.setting.alias_rule * 1
          const logo = res.data.setting.logo
          if (logo instanceof Object) {
            this.logoUrl = res.data.setting.logo.url
            this.basicForm.logo = res.data.setting.logo.id
          }
          const wechat_code = res.data.setting.wechat_code
          if (wechat_code instanceof Object) {
            this.wechatUrl = res.data.setting.wechat_code.url
            this.basicForm.wechat_code = res.data.setting.wechat_code.id
          }
          const dark_logo = res.data.setting.dark_logo
          if (dark_logo instanceof Object) {
            this.dark_logo_url = res.data.setting.dark_logo.url
            this.basicForm.dark_logo = res.data.setting.dark_logo.id
          }
        }
      })
    },
    // 封面照片上传成功
    handleSuccess(res, file, fileList) {
      if (res.code == -200 || res.code == 0) {
        this.logoUrl = URL.createObjectURL(file.raw)
        this.basicForm.logo = res.data.id
      }
    },
    handleSuccess2(res, file, fileList) {
      if (res.code == -200 || res.code == 0) {
        this.wechatUrl = URL.createObjectURL(file.raw)
        this.basicForm.wechat_code = res.data.id
      }
    },
    // 保存编辑
    save() {
      this.loading = true
      this.$refs.basicForm.validate(valid => {
        if (valid) {
          const val = {
            website_id: this.siteId,
            lang: this.lang,
            setting: this.basicForm
          }
          if (!val.setting.static_file) {
            val.setting.static_file = ''
          }
          // console.log(val, '-----------')
          // return
          websettingApi.basicUpdate(val).then(res => {
            if (res.code == 0) {
              this.$message.success(res.msg)
              this.getBasciInfo()
            }
            this.loading = false
          })
        } else {
          this.$message.error(this.$t('请填写必要信息'))
        }
      })
    }
  }
}
</script>

<style lang="scss">
#websiteSetting {
  .el-form-item__content {
    line-height: 0 !important;
  }
}
</style>
<style scoped lang="scss">
#websiteSetting {
  .switch-website {
    ::v-deep .el-form-item__content {
      line-height: 35px !important;
    }
  }
}
</style>
